*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #a5deff;
}
h1{
    position: absolute;
    top: 20vh;
    font-size: 40px;
}
.flight-box{
    width: 70vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    font-size: 1.2em;
}
.flight-box input,
input.flight{
    /* 自定义变量 */
    --bg:#6c6c84;
    --scale:clamp(1,calc(1 + 0.5 * sin(pi * var(--val) / 100)), 2);
    --shadow:clamp(0.15em, calc(1em * sin(pi * var(--val) / 100)), 1em);
    --opacity:clamp(0.2, calc(1 - sin(pi * var(--val) / 100)), 0.4);
    --color:rgb(0 0 0 / var(--opacity));
    --primary:#f0f4fc;
    --secondary:#b55;
    --val:0;
    --height:3em;
    appearance: none;
    container-type: inline-size;
    flex: 1;
    height: var(--height);
    border: none;
    border-radius: 10em;
    position: relative;
    background: radial-gradient(circle at 0.35em 50%, var(--bg) 0.35em, #0000 0) no-repeat,
    radial-gradient(circle at calc(100% - 0.35em) 50%, var(--bg) 0.35em, #0000 0) no-repeat,
    linear-gradient(#0000 45%, var(--bg) 0 55%, #0000 0) 50% 50% / 99% 100%, #f000;

    /* 飞过的轨道 */
    &::before{
        content: "";
        width: calc(var(--val) * 1%);
        min-width: 0.5em;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: radial-gradient(circle at 0.35em 50%, #000 0.35em, #0000 0) no-repeat,
        linear-gradient(#0000 45%, #000 0 55%, #0000 0) 50% 50% / calc(100% - 1em) 100% no-repeat,
        #f000;
    }
    /* 云朵 */
    &::after{
        content: "";
        width: 100%;
        height: 12em;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        pointer-events: none;
        background: 
        /* 云朵1 */
        radial-gradient(3% 20% at 50% 20%, #fff 40%, #0000 0),
        radial-gradient(3% 20% at 52.5% 13%, #fff 40%, #0000 0),
        radial-gradient(2% 20% at 51% 10%, #fff 40%, #0000 0),
        radial-gradient(2.5% 20% at 51.5% 27%, #fff 50%, #0000 0),
        radial-gradient(2% 20% at 53% 23%, #fff 60%, #0000 0),
        radial-gradient(4% 40% at 55% 20%, #fff 40%, #0000 0),
        /* 云朵2 */
        radial-gradient(3% 20% at 40% 80%, #fff 40%, #0000 0),
        radial-gradient(3% 20% at 42.5% 87%, #fff 40%, #0000 0),
        radial-gradient(2% 20% at 41% 90%, #fff 40%, #0000 0),
        radial-gradient(2.5% 20% at 41.5% 72%, #fff 50%, #0000 0),
        radial-gradient(2% 20% at 43% 73%, #fff 60%, #0000 0),
        radial-gradient(4% 40% at 40% 78%, #fff 40%, #0000 0);
        background-size: 300% 100%;
        background-position: calc(var(--val) * 1%) 0;
        mask: linear-gradient(90deg,#0000,#0008 35% 65%,#0000);
        -webkit-mask: linear-gradient(90deg,#0000,#0008 35% 65%,#0000);
    }
    /* 轨道 */
    &::-webkit-slider-runnable-track{
        height: 100%;
        position: relative;
        z-index: 1;
    }
    /* 滑块（飞机） */
    &::-webkit-slider-thumb{
        -webkit-appearance: none;
        appearance: none;
        transform: translateY(calc(-50% + var(--height) / 2)) scale(var(--scale));
        width: 4em;
        aspect-ratio: 1;
        pointer-events: none;
        /* 开始画飞机 */
        background: linear-gradient(var(--secondary) 0 0) 2% 50% / 13% 2.5% no-repeat,
        /* 主体 */
        conic-gradient(at -40% 50%, #0000 84.75deg, var(--primary) 85deg 95deg, #0000 95.25deg) 0 0 / 80% 100%,
        /* 飞机头 */
        radial-gradient(closest-side circle at calc(100% - 0.85em) 50%, #9cf 0.3em, #0000 0),
        radial-gradient(20% 10% at 80% 50%, var(--primary) 99%, #0000),
        /* 机尾 */
        conic-gradient(at 45% -45%, #0000 150deg, var(--secondary) 151deg 174deg, #0000 175deg) -50% 40% / 53% 20%,
        conic-gradient(at 45% 145%, #0000 5deg, var(--secondary) 6deg 29deg, #0000 30deg) -50% 60% / 53% 20%,
        /* 机翼 */
        conic-gradient(at 38% -45%, #0000 158deg, var(--secondary) 158.5deg 174deg, #0000 174.5deg) 0 0 / 100% 50%,
        conic-gradient(at 38% 145%, #0000 5deg, var(--secondary) 5.5deg 21deg, #0000 21.5deg) 0 100% / 100% 50%,
        /* 引擎 */
        radial-gradient(80% 50%, #000 99%, #0000) 51% 22% / 21% 11%,
        radial-gradient(80% 50%, #000 99%, #0000) 51% 78% / 21% 11%
        ;
        background-repeat: no-repeat;
        border-radius: 20% / 100%;
        filter: drop-shadow(
            calc(var(--shadow) * 2) calc(var(--shadow) * 1.25) var(--shadow) var(--color)
        );
        box-shadow: none;
    }
}